<script setup lang="ts">
import { ref, reactive } from '@vue/reactivity';
import parser from './parser';
import Modules from './modules';
import fn from './fn';
fn.getComp(Modules['base/HelloWorld']).then((data: any) => {
  // 通过这个函数获取vue组件的props和emits用来生成基础配置，之后有条件了再通过增加额外的声明文件用来添加详细配置
  console.log(data)
})

const index = ref(0)
const config = {
  id: '1',
  name: 'base/HelloWorld',
  props: {
    msg: 'Hello World',
    ref: (el: any) => {
      console.log('HelloWorld ref is:', el, '\n---------------------------------------------------------')
    },
  }, childs: {
    default: [
      index,
      {
        name: 'el-btn',
        props: {
          class: 'btn',
          ref: (el: any) => {
            // 应该是vNode替换的关系，原生组件每次更新ref都会被刷新，Vue组件却不会，封装原生？
            console.log('Buttton1 ref is:', el)
          },
          onClick: (() => {
            console.log('Buttton1 is clicked!')
            index.value = 666
            return () =>
              index.value++
          })()
        },
        childs: {
          default: ['Button [ ', index, ' ]']
        }
      },
      {
        name: 'base/HelloWorld',
        props: {
          msg: index,
          ref: (el: any) => {
            console.log('HelloWorld child ref is:', el)
          },
        },
      }
    ]
  }
}

const comps = {
  // 挂载原生组件，vue组件需要通过import引入
  'el-btn': 'button'
}
</script>
<template lang="pug">
parser(:config="config",:comps="comps")
</template>
<style scoped>
/* 经测试scoped无效，用moudule导入？ */
.btn {
  background-color: #00d;
}
</style>
<style>
.btn {
  color: red;
}
</style>